// 引入node的path模块
const path = require('path');

module.exports = {
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'main.js', // 输出的文件名
    path: path.resolve(__dirname, 'dist') // 输出文件的路径（__dirname指该配置文件所在的目录）
  },
  module: {
    rules: [
      // 打包图片的规则
      {
        test: /\.(jpg|png|gif)$/, // 针对这三种格式的文件使用file-loader处理
        use: {
          loader: 'url-loader',
          options: {
            // 定义打包后文件的名称；
            // [name]:原文件名，[hash]:hash字符串（如果不定义名称，默认就以hash命名，[ext]:原文件的后缀名）
            name: '[name]_[hash].[ext]', 
            outputPath: 'images/' //  定义图片输出的文件夹名（在output.path目录下）
          }
        }
      },
      // 打包样式的规则
      {
        test: /\.scss$/,
        // loader的执行顺序是从下到上，从右到左;
        use: [
          'style-loader',  // style-loader生成的css内容挂在到页面的head部分
          'css-loader',  // css-loader合并css文件
          'sass-loader', // sass-loader编译sass语法
          'postcss-loader' // 用来对.css 文件进行处理(这里是使用autoprefixer插件为css3特性加上浏览器私有前缀)
        ]
      }
    ]
  }
}